<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="position: relative;top: 10px"><i class="el-icon-search"></i>筛选搜索</span>
                <el-button-group style="float: right; padding: 3px 0">
                    <el-button icon="el-icon-refresh" size="small" @click="btnReset">重置</el-button>
                    <el-button type="primary" size="small" @click="btnSearch" icon="el-icon-search">搜索</el-button>

                </el-button-group>
            </div>
            <el-form :inline="true">
                <div>
                    <el-form-item label="输入搜索:">
                        <el-input placeholder="请输入内容" v-model="search">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品货号:">
                        <el-input placeholder="请输入商品货号" v-model="goodId"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类:">
                        <el-cascader
                                v-model="value"
                                :options="options"
                                :props="{ expandTrigger: 'hover' }"
                                @change="handleChange"></el-cascader>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="商品品牌:">
                        <el-cascader
                                placeholder="请选择品牌"
                                v-model="value"
                                :options="options"
                                :props="{ expandTrigger: 'hover' }"
                                @change="handleChange"></el-cascader>
                    </el-form-item>
                    <el-form-item label="上架状态:">
                        <el-cascader
                                v-model="value"
                                :options="options"
                                :props="{ expandTrigger: 'hover' }"
                                @change="handleChange"></el-cascader>
                    </el-form-item>
                    <el-form-item label="审核状态:">
                        <el-cascader
                                v-model="value"
                                :options="options"
                                :props="{ expandTrigger: 'hover' }"
                                @change="handleChange"></el-cascader>
                    </el-form-item>
                </div>

            </el-form>
        </el-card>
        <el-card class="box-card" style="margin-top: 20px">
            <span><i class="el-icon-tickets"></i>商品列表</span>
            <el-button @click="handleAdd" style="float: right" size="small">添加</el-button>
        </el-card>
        <el-card class="box-card" style="margin-top: 5px">
            <el-table
                    :data="productList"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="商品图片"
                        width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.pic" style="height: 80px;">
                    </template>

                </el-table-column>
                <el-table-column
                        width="160"
                        label="商品名称">
                    <template slot-scope="scope">
                        <p>{{scope.row.name}}</p>
                        <p>品牌：{{scope.row.brandName}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                        width="200"
                        label="价格/货号">
                    <template slot-scope="scope">
                        <p>价格：￥{{scope.row.price}}</p>
                        <p>货号：{{scope.row.productSn}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                        label="标签"
                        width="200">
                    <template slot-scope="scope">
                        <p>上架：<el-switch
                                    v-model="scope.row.publishStatus"
                                    @change='changeStatus(scope.row.publishStatus)'
                                    :active-value=1
                                    :inactive-value=0
                                    active-color="#409eff"
                                    inactive-color="#dcdfe6"
                                    >
                            </el-switch>
                        </p>
                        <p>新品：<el-switch
                                v-model="scope.row.newStatus"
                                @change='changeStatus(scope.row.newStatus)'
                                :active-value=1
                                :inactive-value=0
                                active-color="#409eff"
                                inactive-color="#dcdfe6"
                        >
                        </el-switch>
                        </p>
                        <p>推荐：<el-switch
                                v-model="scope.row.recommandStatus"
                                @change='changeStatus(scope.row.recommandStatus)'
                                :active-value=1
                                :inactive-value=0
                                active-color="#409eff"
                                inactive-color="#dcdfe6"
                        >
                        </el-switch></p>
                    </template>

                </el-table-column>

                <el-table-column
                        prop="sort"
                        label="排序">
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="SKU库存">
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                </el-table-column>
                <el-table-column
                        prop="sale"
                        label="销量">
                </el-table-column>
                <el-table-column
                        label="审核状态">
                    <template slot-scope="scope">
                        <p>{{scope.row.verifyStatus|verifyStatusFilter}}</p>
                        <p><el-button type="text">审核详情</el-button> </p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                    <el-row :gutter="5">
                        <el-col :span="8">
                            <el-button
                                    class="btnoperate"
                                    size="mini"
                            >查看
                            </el-button>
                        </el-col>
                        <el-col :span="8">
                            <el-button
                                    class="btnoperate"
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="5">
                        <el-col :span="8">
                            <el-button
                                    class="btnoperate"
                                    size="mini"
                            >日志
                            </el-button>
                        </el-col>
                        <el-col :span="8">
                            <el-popconfirm
                                    confirmButtonText='确定'
                                    cancelButtonText='取消'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    title="确定删除吗？"
                                    @onConfirm="handleDelete(scope.$index, scope.row)"
                            >
                                <el-button
                                        class="btnoperate"
                                        slot="reference"
                                        size="mini"
                                        type="danger"
                                >删除
                                </el-button>
                            </el-popconfirm>
                        </el-col>
                    </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 20px;float:right"
                    background
                    @size-change="btnSearch"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[5, 10, 15]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            >
            </el-pagination>
            <el-dialog
                    title="添加"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-form :model="addForm" ref="addForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="编号" prop="id">
                        <el-input v-model="addForm.id"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片" prop="pic">
                        <el-input v-model="addForm.pic"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片" prop="pic">
                        <el-input v-model="addForm.pic"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="brandName">
                        <el-input v-model="addForm.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" prop="price">
                        <el-input v-model="addForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="货号" prop="productSn">
                        <el-input v-model="addForm.productSn"></el-input>
                    </el-form-item>
                    <el-form-item label="上架" prop="publishStatus">
                        <el-input v-model="addForm.publishStatus"></el-input>
                    </el-form-item>
                    <el-form-item label="新品" prop="newStatus">
                        <el-input v-model="addForm.newStatus"></el-input>
                    </el-form-item>
                    <el-form-item label="推荐" prop="recommandStatus">
                        <el-input v-model="addForm.recommandStatus"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort1">
                        <el-input v-model="addForm.sort1"></el-input>
                    </el-form-item>
                    <el-form-item label="SKU库存" prop="stock">
                        <el-input v-model="addForm.stock"></el-input>
                    </el-form-item>
                    <el-form-item label="销量" prop="sale">
                        <el-input v-model="addForm.sale"></el-input>
                    </el-form-item>
                    <el-form-item label="审核状态" prop="verifyStatus">
                        <el-input v-model="addForm.verifyStatus"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="btnCancle">取 消</el-button>
                    <el-button type="primary" @click="btnAdd(addForm)">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import {api_productList}  from "../../api/product";
    export default {

        data() {
            return {
                value: [],
                dialogVisible: false,
                search: '',
                page: {
                    "pageNum":1,
                    "pageSize":5,
                    "totalPage":3,
                    "total":11
                },
                productList:[{
                    id:'',
                    pic:'',
                    name:'',
                    brandName:'',
                    price:'',
                    productSn:'',
                    sale: '',
                    stock: '',
                    publishStatus:'',
                    newStatus:'',
                    recommandStatus:'',
                    verifyStatus:'',
                    sort:'',

                }],
                goodId:'',
                addForm: [{
                    id:'',
                    pic:'',
                    name:'',
                    brandName:'',
                    price:'',
                    productSn:'',
                    sale: '',
                    stock: '',
                    publishStatus:'',
                    newStatus:'',
                    recommandStatus:'',
                    verifyStatus:'',
                    sort1:'',
                    operation:'',
                    row:'',

                }],
                options: [{
                    value: 'zhinan',
                    label: '指南',
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                            value: 'yizhi',
                            label: '一致'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        children: [{
                            value: 'layout',
                            label: 'Layout 布局'
                        }, {
                            value: 'color',
                            label: 'Color 色彩'
                        }, {
                            value: 'typography',
                            label: 'Typography 字体'
                        }, {
                            value: 'icon',
                            label: 'Icon 图标'
                        }, {
                            value: 'button',
                            label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }, {
                            value: 'checkbox',
                            label: 'Checkbox 多选框'
                        }, {
                            value: 'input',
                            label: 'Input 输入框'
                        }, {
                            value: 'input-number',
                            label: 'InputNumber 计数器'
                        }, {
                            value: 'select',
                            label: 'Select 选择器'
                        }, {
                            value: 'cascader',
                            label: 'Cascader 级联选择器'
                        }, {
                            value: 'switch',
                            label: 'Switch 开关'
                        }, {
                            value: 'slider',
                            label: 'Slider 滑块'
                        }, {
                            value: 'time-picker',
                            label: 'TimePicker 时间选择器'
                        }, {
                            value: 'date-picker',
                            label: 'DatePicker 日期选择器'
                        }, {
                            value: 'datetime-picker',
                            label: 'DateTimePicker 日期时间选择器'
                        }, {
                            value: 'upload',
                            label: 'Upload 上传'
                        }, {
                            value: 'rate',
                            label: 'Rate 评分'
                        }, {
                            value: 'form',
                            label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }, {
                            value: 'tree',
                            label: 'Tree 树形控件'
                        }, {
                            value: 'pagination',
                            label: 'Pagination 分页'
                        }, {
                            value: 'badge',
                            label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }, {
                            value: 'loading',
                            label: 'Loading 加载'
                        }, {
                            value: 'message',
                            label: 'Message 消息提示'
                        }, {
                            value: 'message-box',
                            label: 'MessageBox 弹框'
                        }, {
                            value: 'notification',
                            label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }, {
                            value: 'breadcrumb',
                            label: 'Breadcrumb 面包屑'
                        }, {
                            value: 'dropdown',
                            label: 'Dropdown 下拉菜单'
                        }, {
                            value: 'steps',
                            label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }, {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        }, {
                            value: 'card',
                            label: 'Card 卡片'
                        }, {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        }, {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }]
            }
        },
        name: "ProductList",
        created(){
            this.handleProductList();
        },
        filters:{
            verifyStatusFilter(value){
                let text='审核通过'
                if(value!==1)
                    text='未审核'
                return text
            }

        },
        methods: {
            async handleProductList() {
                const  {data:res}= await api_productList();
                let result=res.data;
                console.log("getGoodsInfo JSON.stringify(res.data):::"+JSON.stringify(result));
                this.productList=result.list;
                this.page.pageNum=result.pageNum;
                this.page.pageSize=result.pageSize;
                this.page.total=result.total;
                this.page.totalPage=result.totalPage;
                console.log("this.productList=:created::"+this.productList);
            },
            //监听 switch 开关状态的改变
            async  changeStatus (info){
                console.log(info)
                // const{data:res}= await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
                // if(res.meta.status !==200){
                // info= !info
                // }
                // this.$message.succeess('更新用户状态成功！')
            },
            handleClose() {
                this.$confirm('确认关闭？')
                // .then(_ => {
                //     done();
                // })
                // .catch(_ => {});
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            btnAdd(addForm){
                this.dialogVisible=false;
                if(addForm.row)
                    this.productList[addForm.row]=addForm;
                else {
                    this.productList.push(addForm);

                }
                this.addForm={brand_right:0}
                this.$message({
                    type: 'info',
                    message: '添加成功: ' + addForm.date
                });
            },
            btnCancle(){
                this.dialogVisible = false;
                this.addForm={brand_right:0}
            },
            btnSearch() {

            },
            btnReset() {

            },
            handleChange(value) {
                console.log(value);
            },
            handleEdit(index, row) {
                console.log("handleEdit:index:row:" + index + row);
                this.addForm=row;
                this.addForm.operation="edit";
                this.addForm.row=index;
                this.dialogVisible=true;
            },
            handleDelete(index, row) {
                console.log("handleDelete:index:row:" + index + row);
                this.productList.splice(index, 1)
            },
            handleAdd(){
                this.addForm.operation="add";
                this.dialogVisible=true;
            }
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        position: relative;
        top: 20px;
    }

    .el-form-item {
        margin-left: 40px;
    }

    .btnoperate {
        margin: 5px;
    }
</style>